/*
 * Create:      柿子
 * CreateDate:  2022/08/31
 * Describe：   配镜管理 - 详情
 * */
import React, { Component } from 'react';
import { Modal, Card, Row, Col, Steps, Tag, Button, Tooltip, Popconfirm, message, Icon } from 'antd';
import { Util } from 'tools';
import { httpConfig } from 'containers/config/httpConfig'
import { $loadTemplate } from 'pages/lodop/Common/Print.js';
import DynamicRenderingForm from 'pages/common/DynamicRenderingForm';
import '../style/index.less';
const { Step } = Steps;

class MatchingDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      rowData: {},
      leftEyeFormData: [],
      rightEyeFormData: [],
      stepsData: [],
      currentStep: 1,
      leftRowData: {},
      rightRowData: {},
      patInfo: {}, // 患者信息
      uploadUrl: '',
      saveFlag: 'N', // 保存标志，是否点了保存按钮
    };
    // 逆流程状态code，需要展示红点的
    this.errorStatusCode = ['07', '09', '10', '20', '21', '22', '23', '24', '25', '27', '28', '52'];
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
    let windowHost = window.location && window.location.protocol && window.location.host ? (window.location.protocol + '//' + window.location.host) : (window.location && window.location.origin ? window.location.origin : '');
    let httpUrl = windowHost && (windowHost.indexOf('localhost') !== -1 || windowHost.indexOf('127.0.0.1') !== -1) ? httpConfig.ipDeault : windowHost;
    let uploadUrl = httpUrl + '/images/optomefile/';
    this.setState({ uploadUrl });
  }

  // 修改弹窗状态
  modifyVisible = (visible, record = {}, isGetDetails = 'Y') => {
    const { saveFlag } = this.state;
    if (visible) {
      this.setState({ rowData: record })
    } else { // 关闭弹窗时
      saveFlag === 'Y' && this.props.handleQuery && this.props.handleQuery();
    }
    this.setState({ visible, saveFlag: 'N' }, () => {
      this.state.visible && isGetDetails !== 'N' ? this.getMatchingDetails() : '';
    })
  }

  // 获取申请单详情
  getMatchingDetails = async () => {
    try {
      const { interfaceFlag } = this.props; // 用于区分界面来源
      const { rowData } = this.state;
      let data = {
        params: [{
          suppFlag: rowData?.suppFlag || 'N', // 订单管理Y
          glassesRequestID: rowData?.glassesRequestID || rowData?.requestID
        }]
      }
      let res = await React.$asyncPost(this, '17030025', data);
      // 获取左右眼表单数据
      let leftOrderSet = res.result?.leftOrderSet || [];
      let rightOrderSet = res.result?.rightOrderSet || [];
      // 左眼
      let leftEye = res.result?.leftEye || [];
      let leftRowData = {
        product: res.result?.leftProjectDesc,
        price: res.result?.leftPrice || 0,
        valueData: leftEye,
        varietiesRecord: {
          price: res.result?.leftPrice || 0,
          stockID: res.result?.leftStockItemID
        }
      };
      if (leftEye && Array.isArray(leftEye)) {
        this.leftEyeFormRef && this.leftEyeFormRef.resetFields();
        for (var i = 0; i < leftEye.length; i++) {
          let leftTypeCode = leftOrderSet && leftOrderSet.length > 0 ? Util.returnDataCccordingToAttributes(leftOrderSet, leftEye[i].fieldCode, 'code')?.componentTypeCode : '';
          leftRowData[leftEye[i].fieldCode] = leftTypeCode === 'Select' ? leftEye[i].reqFieldValueID : leftEye[i].reqFieldValue;
        }
      }
      // 右眼
      let rightEye = res.result?.rightEye || [];
      let rightRowData = {
        product: res.result?.rightProjectDesc,
        price: res.result?.rightPrice || 0,
        valueData: rightEye,
        varietiesRecord: {
          price: res.result?.rightPrice || 0,
          stockID: res.result?.rightStockItemID
        }
      }
      if (rightEye && Array.isArray(rightEye)) {
        this.rightEyeFormRef && this.rightEyeFormRef.resetFields();
        for (var i = 0; i < rightEye.length; i++) {
          let rightTypeCode = rightOrderSet && rightOrderSet.length > 0 ? Util.returnDataCccordingToAttributes(rightOrderSet, rightEye[i].fieldCode, 'code')?.componentTypeCode : '';
          rightRowData[rightEye[i].fieldCode] = rightTypeCode === 'Select' ? rightEye[i].reqFieldValueID : rightEye[i].reqFieldValue;
        }
      }
      // 当前所在步骤
      let currentStep = 0;
      let stepsData = res.result?.statusArr || [];
      for (var i = 0; i < stepsData.length; i++) {
        if (stepsData[i].handleFlag === 'Y') {
          currentStep = i;
        }
      }
      this.setState({
        leftRowData,
        rightRowData,
        stepsData,
        currentStep,
        patInfo: res.result
      }, () => {
        this.getEyeFormData('leftEyeFormData', Util.addKeyValueToDataSource(leftOrderSet, false, 0));
        this.getEyeFormData('rightEyeFormData', Util.addKeyValueToDataSource(rightOrderSet, false, 0));
        setTimeout(() => {
          var gundong = document.getElementById((interfaceFlag + 'md-steps'));
          if (gundong && gundong.scrollHeight) {
            gundong.scrollTop = gundong.scrollHeight - (63 * (stepsData.length - 1 - currentStep) + 90);
          }
        }, 100)
      })
    } catch (error) {
      console.log(error);
    }
  }

  // 获取左眼表单数据
  getEyeFormData = (dataIndex, formData) => {
    const { rowData, patInfo } = this.state;
    const suppFlag = rowData?.suppFlag || ''; // 父组件标识
    const curStatusCode = patInfo?.curStatusCode || ''; // 当前状态
    const initFormData = [{
      dataIndex: 'product',
      placeholder: '请先在右侧选中产品',
      title: '配镜产品', //  + '(' + (dataIndex === 'leftEyeFormData' ? 'OS' : 'OD') + ')'
      typeCode: 'TextArea',
      required: 'Y',
      disabled: 'Y',
      col: 24
    }
      //   , {
      //   dataIndex: 'price',
      //   placeholder: '请输入价格',
      //   title: '价格' + '(' + (dataIndex === 'leftEyeFormData' ? 'OS' : 'OD') + ')',
      //   typeCode: 'InputNumber',
      //   required: 'Y',
      //   col: 24,
      //   disabled: suppFlag === 'Y' ? 'Y' : (curStatusCode === '01' || curStatusCode === '10' || curStatusCode === '20' || ((curStatusCode === '06' || curStatusCode === '36') && rowData.suppFlag === 'ReturnOrder') ? 'N' : 'Y'), // 退镜也可修改参数
      //   addonAfter: (
      //     <Tooltip title="元">
      //       <span className="ellipsis" style={{ color: '#666', width: '36px', display: 'block' }}>元</span>
      //     </Tooltip>
      //   )
      // }
    ];
    formData = formData && formData.map((item, index) => {
      return {
        ...item,
        isEnterJump: 'Y', // 回车下一个输入域
        dataIndex: item.code,
        required: item.required,
        defaultValue: undefined,
        typeCode: item.componentTypeCode,
        col: Number(item?.seatSize || 24),
        detailItem: item?.selectData || [],
        title: item.descripts, // + '(' + (dataIndex === 'leftEyeFormData' ? 'OS' : 'OD') + ')'
        addonAfter: (
          item.unitDesc !== 'none' ? (
            <Tooltip title={item.unitDesc || '单位'}>
              <span className='ellipsis' style={{ color: item.unitDesc ? '#666' : '#d9d9d9', width: '36px', display: 'block' }}>{item.unitDesc || '单位'}</span>
            </Tooltip>
          ) : ''
        ),
        disabled: suppFlag === 'Y' ? 'Y' : (
          curStatusCode === '01' || curStatusCode === '10' || curStatusCode === '20' || (curStatusCode === '25' && rowData.suppFlag === 'N') || ((curStatusCode === '06' || curStatusCode === '36') && rowData.suppFlag === 'ReturnOrder') || rowData.suppFlag === 'exchange' ? item.readOnly : 'Y'
        ), // 退镜也可修改参数
        onSelect: item.componentTypeCode === 'Select' ? () => this.handleSelectChange(dataIndex, item) : '',
      }
    });
    if (formData && formData.length > 0) {
      formData = [...initFormData, ...formData];
    }
    this.state[dataIndex] = formData;
    this.setState({});
  }

  handleSelectChange = (dataIndex, record) => {
    console.log('dataIndex, record', dataIndex, record)
    // 修改加急标志/加急标志修改如果是同一个品牌的话就一起修改掉
    if (record?.code === 'Urgent') { // 加急标志
      let currentEyeCard = dataIndex && dataIndex.indexOf('right') > -1 ? 'right' : 'left';
      this.handleUrgentModify(currentEyeCard)
    }
  }

  // 修改加急标志
  handleUrgentModify = (currentEyeCard) => {
    let { leftRowData, rightRowData } = this.state;
    if (leftRowData?.brandID === rightRowData?.brandID) { // 同一品牌加急标志保持一致
      let value = this[currentEyeCard + 'EyeFormRef'] && this[currentEyeCard + 'EyeFormRef'].getFieldsValue();
      let opposeEyeCard = currentEyeCard === 'left' ? 'right' : 'left';
      this[opposeEyeCard + 'EyeFormRef'] && this[opposeEyeCard + 'EyeFormRef'].setFieldsValue({
        Urgent: value?.Urgent || undefined
      });
    }
  }

  // 发货详情
  getDeliverGoods = (deliver) => {
    const { uploadUrl } = this.state;
    return (
      <div className="md-deliver-goods">
        <div className="md-deliver-goods-title">
          发货详情
        </div>
        {deliver && deliver.map((item, index) => {
          let valueArrIndex = item.part === 'L' ? 'leftValueArr' : 'rightValueArr';
          return (
            <>
              {index % 2 === 1 ? <div style={{ borderTop: '1px dashed #e8e8e8', height: 1 }}></div> : ''}
              <div key={index} style={{ padding: '6px 0' }}>
                <div className="md-deliver-goods-item">
                  <span className="md-deliver-goods-item-label">产品名称：</span>
                  <span className="md-deliver-goods-item-value">{item?.medDesc || ''}</span>
                </div>
                <div className="md-deliver-goods-item">
                  <span className="md-deliver-goods-item-label">眼别：</span>
                  <span className="md-deliver-goods-item-value">{item?.part === 'L' ? '左眼' : '右眼'}</span>
                </div>
                <div className="md-deliver-goods-item">
                  <span className="md-deliver-goods-item-label">生产日期：</span>
                  <span className="md-deliver-goods-item-value">{item?.produceDate || ''}</span>
                </div>
                <div className="md-deliver-goods-item">
                  <span className="md-deliver-goods-item-label">有效日期：</span>
                  <span className="md-deliver-goods-item-value">{item?.expDate || ''}</span>
                </div>
                <div className="md-deliver-goods-item">
                  <span className="md-deliver-goods-item-label">产品编号：</span>
                  <span className="md-deliver-goods-item-value">{item?.productNo || ''}</span>
                </div>
                <div className="md-deliver-goods-item-matching-detail" onClick={() => this.handleViewLensParameters(item, index)}>
                  <span>{item.visible ? '收起' : '查看'}配镜参数</span>
                  <Icon type={item.visible ? 'caret-up' : 'caret-down'} />
                </div>
                <div style={{ display: item.visible ? 'block' : 'none', color: '#ddd', paddingTop: '4px' }}>
                  {valueArrIndex in item && item[valueArrIndex] && item[valueArrIndex].length > 0 ? item[valueArrIndex].map((detailItem, detailIndex) => {
                    let reqFieldValue = typeof (detailItem?.reqFieldValue) === 'string' ? (detailItem?.reqFieldValue || '') : (Array.isArray(detailItem?.reqFieldValue) ? detailItem?.reqFieldValue : []);
                    return (
                      <div key={detailIndex} className="md-deliver-goods-item">
                        <span className="md-deliver-goods-item-label" style={{ width: '120px' }}>{detailItem?.reqFieldDesc || ''}{valueArrIndex === 'leftValueArr' ? '(OS)' : '(OD)'}：</span>
                        {typeof (reqFieldValue) === 'string' ? (
                          <span className="md-deliver-goods-item-value" style={{ width: '90px' }}>
                            {/* 展示数据 */}
                            {reqFieldValue + ' ' + (detailItem?.unitDesc || '单位')}
                          </span>
                        ) : (
                          // 展示附件
                          <div className="md-deliver-goods-item-value" style={{ width: '90px' }}>
                            {reqFieldValue && reqFieldValue.map((fileItem, fileIndex) => {
                              return (
                                <div key={fileIndex}>
                                  <a href={uploadUrl + fileItem.filePath} target="_Blank">{fileItem.name}</a>
                                </div>
                              )
                            })}
                          </div>
                        )}
                      </div>
                    )
                  }) : ''}
                </div>
              </div>
            </>
          )
        })}
      </div>
    )
  }

  // 查看配镜参数
  handleViewLensParameters = (item, index) => {
    item.visible = !item.visible;
    this.setState({});
  }

  // 获取悬浮文字
  getFloatDesc = (floatDesc) => {
    let fTitle = floatDesc && typeof (floatDesc) === 'string' && floatDesc.indexOf('/title') > -1 ? floatDesc.split('/title')[0] : '';
    let fContent = floatDesc && typeof (floatDesc) === 'string' && floatDesc.indexOf('/title') > -1 ? floatDesc.split('/title')[1] : '';
    let fContentArr = fContent && fContent.indexOf('/n') ? fContent.split('/n') : '';
    return (
      <div className="md-deliver-goods">
        <div className="md-deliver-goods-title">
          {fTitle}
        </div>
        <div style={{ padding: '8px 0' }}>
          {fContentArr && fContentArr.map((item, index) => {
            if (item && item.indexOf('<br/>') > -1) {
              let brStr = item.split('<br/>')[1];
              return (
                <>
                  <div style={{ borderBottom: '1px dashed #e8e8e8', height: 1, margin: '6px 0' }}></div>
                  <div key={index}>
                    {this.handleTextAlignment(brStr, index)}
                  </div>
                </>
              )
            } else {
              return this.handleTextAlignment(item, index);
            }
          })}
        </div>
      </div>
    )
  }

  // 获取退回原因
  getRemarkDesc = (floatDesc, record) => {
    let reasonDesc = floatDesc && typeof (floatDesc) === 'string' && floatDesc.indexOf('^') > -1 ? floatDesc.split('^')[0] : floatDesc;
    let remark = floatDesc && typeof (floatDesc) === 'string' && floatDesc.indexOf('^') > -1 ? floatDesc.split('^')[1] : '';
    return (
      <div className="md-deliver-goods">
        <div className="md-deliver-goods-title">
          {record.statusCode === '10' ? '退回原因' : (record.statusCode === '07' ? '退镜原因' : '详情')}
        </div>
        <div style={{ padding: '6px 0' }}>
          <div className="md-deliver-goods-item">
            <span className="md-deliver-goods-item-label" style={{ width: '50px' }}>原因：</span>
            <span className="md-deliver-goods-item-value">{reasonDesc}</span>
          </div>
          <div className="md-deliver-goods-item">
            <span className="md-deliver-goods-item-label" style={{ width: '50px' }}>备注：</span>
            <span className="md-deliver-goods-item-value">{remark || '暂无备注'}</span>
          </div>
        </div>
      </div>
    )
  }

  // 文字对齐
  handleTextAlignment = (str, index) => {
    if (str && str.indexOf(':') > -1) {
      let title = str.split(':')[0];
      let desc = str.split(':')[1];
      return (
        <div key={index} className="md-deliver-goods-item">
          <span className="md-deliver-goods-item-label">{title}：</span>
          <span className="md-deliver-goods-item-value">{desc}</span>
        </div>
      )
    } else {
      return str;
    }
  }

  // 修改订单状态
  modifyApplicationFormStatus = (statusCode) => {
    const { rowData } = this.state;
    let requestIDArr = [rowData?.glassesRequestID];
    this.props.modifyApplicationFormStatus && this.props.modifyApplicationFormStatus(statusCode, requestIDArr, 'matchingDetails');
  }

  // 判断内容是否修改
  whetherTheContentIsModified = () => {
    const { leftRowData, rightRowData } = this.state;
    let leftValues = this.leftEyeFormRef && this.leftEyeFormRef.getFieldsValue();
    let rightValues = this.rightEyeFormRef && this.rightEyeFormRef.getFieldsValue();
    let leftFlag = false;
    if (leftValues && leftValues.product) { // 左眼
      for (var leftValKey in leftValues) {
        for (var leftRowKey in leftRowData) {
          if ((leftValKey === leftRowKey) && (leftValues[leftValKey] !== leftRowData[leftRowKey])) {
            leftFlag = true;
            break;
          }
        }
      }
    }
    let rightFlag = false;
    if (rightValues && rightValues.product) {
      for (var rightValKey in rightValues) {
        for (var rightRowKey in rightRowData) {
          if ((rightValKey === rightRowKey) && (rightValues[rightValKey] !== rightRowData[rightRowKey])) {
            rightFlag = true;
            break;
          }
        }
      }
    }
    return leftFlag && rightFlag ? 'all' : (leftFlag ? 'left' : (rightFlag ? 'right' : ''));
  }

  // 保存
  handleSave = async (fn) => {
    try {
      const { patInfo, leftEyeFormData, rightEyeFormData, leftRowData, rightRowData } = this.state;
      let leftFormValues = {};
      if (patInfo && patInfo.leftProjectDesc) {
        leftFormValues = await this.leftEyeFormRef.handleSave();
        if (leftFormValues && leftFormValues.error) {
          message.error('请完善左眼必填信息。');
          return;
        }
      }
      let rightFormValues = {};
      if (patInfo && patInfo.rightProjectDesc) {
        rightFormValues = await this.rightEyeFormRef.handleSave();
        if (rightFormValues && rightFormValues.error) {
          message.error('请完善右眼必填信息。');
          return;
        }
      }
      let leftEye = this.handleCombineFormData(leftFormValues, leftEyeFormData, leftRowData?.valueData || []);
      let rightEye = this.handleCombineFormData(rightFormValues, rightEyeFormData, rightRowData?.valueData || []);
      let data = {
        params: [{
          admID: patInfo?.admID || '', // 就诊ID
          glassesRequestID: patInfo?.glassesRequestID || '',
          prePayAmt: patInfo?.prePayAmt, // 预交金
          leftPrice: patInfo && 'leftPrice' in patInfo ? patInfo.leftPrice : '',
          leftStockItemID: patInfo?.leftStockItemID || '',
          leftEye,
          rightPrice: patInfo && 'rightPrice' in patInfo ? patInfo.rightPrice : '',
          rightStockItemID: patInfo?.rightStockItemID || '',
          rightEye
        }]
      }
      if (fn === 'confirmTheMirrorRetraction') { // 确认退镜，在退镜接口去做保存
        let valueArr = [...leftEye, ...rightEye]; // 后台只需要传入左右眼输入域的值
        this.props.getDetailsParams && this.props.getDetailsParams(valueArr);
        this.modifyVisible(false);
      } else {
        let res = await React.$asyncPost(this, '17030009', data);
        if (fn) {
          fn && fn();
        } else {
          this.setState({ saveFlag: 'Y' }); // 用于保存后关闭弹窗时是否需要调用外部传入的查询接口
          message.success(res.errorMessage || '保存成功');
          let modifyFlag = this.whetherTheContentIsModified();
          if (modifyFlag === 'all') {
            this.handleUpdateRowData(leftFormValues, 'leftRowData');
            this.handleUpdateRowData(rightFormValues, 'rightRowData');
          } else if (modifyFlag === 'left') {
            this.handleUpdateRowData(leftFormValues, 'leftRowData');
          } else if (modifyFlag === 'right') {
            this.handleUpdateRowData(rightFormValues, 'rightRowData');
          }
        }
      }
    } catch (error) {
      console.log(error);
    }
  }

  // 更新眼别数据
  handleUpdateRowData = (values, dataIndex) => {
    let rowData = this.state[dataIndex];
    for (var rowKey in rowData) {
      for (var valKey in values) {
        if ((rowKey === valKey) && (rowData[rowKey] !== values[valKey])) {
          this.state[dataIndex][rowKey] = values[valKey];
        }
      }
    }
    this.setState({})
  }

  // 获取动态眼别表单数据
  handleCombineFormData = (values, dataSource, valueData) => {
    let combineFormData = [];
    if (dataSource && dataSource.length > 0) {
      for (var i = 0; i < dataSource.length; i++) {
        for (var keys in values) {
          if ((dataSource[i].dataIndex === keys) && (dataSource[i].dataIndex !== 'product')) {
            combineFormData.push({
              glassesReqDetailID: valueData && valueData.length > 0 ? Util.returnDataCccordingToAttributes(valueData, keys, 'fieldCode')?.glassesReqDetailID : undefined,
              reqFieldID: dataSource[i].productBrandOrderSetID,
              reqFieldValue: dataSource[i].typeCode === 'Select' ? Util.returnDataCccordingToAttributes(dataSource[i].selectData, values[keys])?.descripts : values[keys],
              reqFieldValueID: dataSource[i].typeCode === 'Select' ? values[keys] : undefined,
            })
          }
        }
      }
    }
    return combineFormData;
  }

  // 发送
  handleSend = (statusCode) => {
    let modifyFlag = this.whetherTheContentIsModified();
    if (modifyFlag) {
      Modal.confirm({
        title: '确认发送提醒',
        content: (modifyFlag === 'left' ? '左眼' : (modifyFlag === 'left' ? '右眼' : '左/右眼')) + '参数内容改变，确认保存并发送/提交订单？',
        okText: '是',
        cancelText: '否',
        onOk: () => {
          this.handleSave(() => this.modifyApplicationFormStatus(statusCode || '02'));
        },
        onCancel: () => { },
      });
    } else {
      this.modifyApplicationFormStatus(statusCode || '02');
    }
  }

  // 退回订单
  handleReturnOrder = (statusCode) => {
    const { rowData } = this.state;
    this.setState({ visible: false }, () => {
      this.props.handleReturnOrder && this.props.handleReturnOrder(rowData, statusCode);
    })
  }

  // 打印订单
  handlePrint = async () => {
    try {
      let { rowData } = this.state;
      let data = {
        params: [{
          glassesRequestIDArr: [rowData?.glassesRequestID],
          invoiceFlag: 'N', // Y:发货订单 N:配镜申请订单
          suppFlag: rowData?.suppFlag || 'N', // 订单管理Y, // 供应商标志
        }]
      }
      let res = await React.$asyncPost(this, '17030077', data);
      let dataArr = res?.result || [];
      dataArr && dataArr.map((item, i) => {
        $loadTemplate(item.template, item.printStr);
      });
    } catch (error) {
      console.log(error);
    }
  }

  // 订单发货
  handleDeliverGoods = () => {
    let { rowData } = this.state;
    this.setState({ visible: false }, () => {
      this.props.handleDeliverGoods && this.props.handleDeliverGoods(rowData);
    })
  }

  // 处方流转保存
  handleExchangeSave = async (statusCode) => {
    try {
      const { patInfo, leftEyeFormData, rightEyeFormData, leftRowData, rightRowData } = this.state;
      let leftFormValues = {};
      if (patInfo && patInfo.leftProjectDesc) {
        leftFormValues = await this.leftEyeFormRef.handleSave();
        if (leftFormValues && leftFormValues.error) {
          message.error('请完善左眼必填信息。');
          return;
        }
      }
      let rightFormValues = {};
      if (patInfo && patInfo.rightProjectDesc) {
        rightFormValues = await this.rightEyeFormRef.handleSave();
        if (rightFormValues && rightFormValues.error) {
          message.error('请完善右眼必填信息。');
          return;
        }
      }
      let leftEye = this.handleCombineFormData(leftFormValues, leftEyeFormData, leftRowData?.valueData || []);
      let rightEye = this.handleCombineFormData(rightFormValues, rightEyeFormData, rightRowData?.valueData || []);
      console.log('leftEye', leftEye, rightEye)
      let data = {
        params: [{
          statusCode,
          admID: patInfo?.admID || '', // 就诊ID
          glassesRequestID: patInfo?.glassesRequestID || '',
          eyeArr: leftEye && leftEye.length > 0 ? leftEye : rightEye, // 拆单号只存在一种眼别
        }]
      }
      let res = await React.$asyncPost(this, '17030085', data);
      message.success(res?.errorMessage || '操作成功');
      this.setState({ saveFlag: 'Y' }, () => {
        this.modifyVisible(false);
      })
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    const { interfaceFlag } = this.props;
    const { visible, rowData, patInfo, leftEyeFormData, rightEyeFormData, stepsData, currentStep, leftRowData, rightRowData } = this.state;
    const curStatusCode = patInfo?.curStatusCode || ''; // 当前状态
    const suppFlag = rowData?.suppFlag || ''; // 父组件标识
    return (
      <Modal
        title={suppFlag === 'exchange' ? '处方流转' : '查看详情'}
        width="1100px"
        footer={null}
        visible={visible}
        className="glasses-matching-modal matching-details-modal"
        onCancel={() => this.modifyVisible(false)}
      >
        <Row>
          <Col span={16}>
            <div
              style={{ paddingRight: '12px', position: 'relative', height: '100%' }}
            >
              <div className="mdm-left-header">
                <span>
                  病人ID：
                </span>
                {patInfo?.patNo}
                <span>
                  姓名：
                </span>
                {patInfo?.patName}
                <span>
                  性别：
                </span>
                {patInfo?.patSexDesc}
                <span>
                  年龄：
                </span>
                {patInfo?.patAge}
                <span>
                  预交金：
                </span>
                {patInfo?.deposit}元
              </div>
              <Card
                size="small"
                className="md-card md-left-card"
                title={(
                  <div className="card-title-left-icon">
                    <div></div>
                    镜片参数
                  </div>
                )}
              >
                <Row className="md-left-card-content">
                  <Col span={12}>
                    <div className="md-card-left-tag">
                      {/* <Tag className="tamm-tag">左眼</Tag> */}
                      <span className="span" style={{ fontSize: '14px' }}>左眼(OS)</span>
                    </div>
                    <div className="md-left-card-content-form scroll-bar-style">
                      <DynamicRenderingForm
                        className={(curStatusCode === '01' || curStatusCode === '10') ? 'gmaf-dynamic-form' : ''}
                        rowData={leftRowData}
                        formData={leftEyeFormData}
                        formItemCol={{ labelCol: 9, wrapperCol: 15, col: 24 }}
                        onRef={ref => this.leftEyeFormRef = ref}
                      />
                      <div className="no-matching-data" style={{ display: leftEyeFormData && leftEyeFormData.length > 0 ? 'none' : 'block' }}>
                        暂无配镜信息
                      </div>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="md-card-left-tag">
                      {/* <Tag className="tamm-tag">右眼</Tag> */}
                      <span className="span" style={{ fontSize: '14px' }}>右眼(OD)</span>
                    </div>
                    <div className="md-left-card-content-form scroll-bar-style">
                      <DynamicRenderingForm
                        className={(curStatusCode === '01' || curStatusCode === '10') ? 'gmaf-dynamic-form' : ''}
                        rowData={rightRowData}
                        formData={rightEyeFormData}
                        formItemCol={{ labelCol: 9, wrapperCol: 15, col: 24 }}
                        onRef={ref => this.rightEyeFormRef = ref}
                      />
                      <div className="no-matching-data" style={{ display: rightEyeFormData && rightEyeFormData.length > 0 ? 'none' : 'block' }}>
                        暂无配镜信息
                      </div>
                    </div>
                  </Col>
                </Row>
                <div style={{ marginTop: 12, height: 36 }} className="flex-center">
                  {suppFlag === 'Y' ? ( // 订单管理
                    <>
                      {/* {curStatusCode === '04' ? (
                        <Popconfirm title="确定撤销发货吗?" onConfirm={() => this.modifyApplicationFormStatus('09')} >
                          <Button
                            ghost
                            type="danger"
                            style={{ marginRight: ' 12px' }}
                          >
                            撤销发货
                          </Button>
                        </Popconfirm>
                      ) : ''} */}
                      {curStatusCode === '03' ? (
                        <>
                          <Popconfirm title="确定撤销接收吗?" onConfirm={() => this.modifyApplicationFormStatus('09')} >
                            <Button
                              ghost
                              type="danger"
                              style={{ marginRight: ' 12px' }}
                            >
                              撤销接收
                            </Button>
                          </Popconfirm>
                          <Button
                            type="primary"
                            onClick={this.handleDeliverGoods}
                          >
                            订单发货
                          </Button>
                        </>
                      ) : ''}
                      {curStatusCode === '02' ? (
                        <Button ghost type="primary" onClick={this.handlePrint}>打印订单</Button>
                      ) : ''}
                      {curStatusCode === '02' || curStatusCode === '38' ? (
                        <Popconfirm title="确定退回订单吗?" onConfirm={() => this.handleReturnOrder('52')}>
                          <Button
                            ghost
                            type="danger"
                            style={{ margin: '0 12px' }}
                          >
                            退回订单
                          </Button>
                        </Popconfirm>
                      ) : ''}
                      {curStatusCode === '38' ? (
                        <Button
                          type="primary"
                          onClick={() => this.modifyApplicationFormStatus('03')}
                        >
                          接收订单
                        </Button>
                      ) : ''}
                    </>
                  ) : (suppFlag === 'K' ? ( // 订单审核
                    <>
                      {curStatusCode === '02' ? (
                        <>
                          <Popconfirm title="确定退回订单吗?" onConfirm={() => this.handleReturnOrder('20')} >
                            <Button
                              ghost
                              type="danger"
                              style={{ marginRight: ' 12px' }}
                            >
                              退回订单
                            </Button>
                          </Popconfirm>
                          <Button
                            type="primary"
                            style={{ marginRight: ' 12px' }}
                            onClick={() => this.modifyApplicationFormStatus('11')}
                          >
                            审核通过
                          </Button>
                        </>
                      ) : (curStatusCode === '11' ? (
                        <>
                          <Popconfirm title="确定要撤销审核吗?" onConfirm={() => this.modifyApplicationFormStatus('09')} >
                            <Button
                              ghost
                              type="danger"
                              style={{ marginRight: ' 12px' }}
                            >
                              撤销审核
                            </Button>
                          </Popconfirm>
                        </>
                      ) : (curStatusCode === '25' ? (
                        <>
                          <Popconfirm title="确定退回订单吗?" onConfirm={() => this.handleReturnOrder('20')}>
                            <Button
                              ghost
                              type="danger"
                              style={{ marginRight: ' 12px' }}
                            >
                              退回订单
                            </Button>
                          </Popconfirm>
                          <Button
                            style={{ background: '#fa8c17' }}
                            className="add-btn add-btn-nohover"
                            onClick={() => this.modifyApplicationFormStatus('11')}
                          >
                            重新提交
                          </Button>
                        </>
                      ) : ''))}
                    </>
                  ) : (suppFlag === 'N' ? ( // 配镜管理
                    <>
                      {curStatusCode === '02' ? (
                        <Popconfirm title="确定撤回订单吗?" onConfirm={() => this.modifyApplicationFormStatus('09')} >
                          <Button
                            ghost
                            type="danger"
                            style={{ marginRight: ' 12px' }}
                          >
                            撤回订单
                          </Button>
                        </Popconfirm>
                      ) : ''}
                      <Button
                        type="primary"
                        style={{ marginRight: ' 12px' }}
                        disabled={!(curStatusCode === '01' || curStatusCode === '10' || curStatusCode === '20' || curStatusCode === '25')}
                        onClick={() => this.handleSave('')}
                      >
                        保存
                      </Button>
                      {curStatusCode === '01' ? (
                        <Button
                          className="add-btn add-btn-nohover"
                          style={{ background: '#27b148', borderColor: '#27b148' }}
                          onClick={() => this.handleSend('02')}
                        >
                          发送订单
                        </Button>
                      ) : ''}
                      {curStatusCode === '10' || curStatusCode === '02' || curStatusCode === '20' ? (
                        <Button
                          disabled={curStatusCode === '02'}
                          style={{ background: curStatusCode === '10' ? '#fa8c17' : '' }}
                          className={curStatusCode === '10' ? 'add-btn add-btn-nohover' : ''}
                          onClick={() => this.handleSend('02')}
                        >
                          重新发送
                        </Button>
                      ) : ''}
                      {curStatusCode === '25' ? ( // 医院采购退回配镜申请单可以重新提交
                        <Button
                          style={{ background: '#fa8c17' }}
                          className="add-btn add-btn-nohover"
                          onClick={() => this.handleSend(rowData?.hisRtnStatusCode || '11')}
                        >
                          重新提交
                        </Button>
                      ) : ''}
                    </>
                  ) : (suppFlag === 'ProcurementPlan' ? ( // 采购计划
                    <>
                      {rowData.statusCode === '0' || rowData.statusCode === '40' ? ( // 从订单选择或状态为40才支持退回订单
                        <Popconfirm title="确定退回订单吗?" onConfirm={() => this.handleReturnOrder('25')} >
                          <Button
                            ghost
                            type="danger"
                          >
                            退回订单
                          </Button>
                        </Popconfirm>
                      ) : ''}
                    </>
                  ) : (suppFlag === 'ReturnOrder' ? ( // 退镜
                    <>
                      <Button
                        style={{ marginRight: ' 12px' }}
                        onClick={() => this.modifyVisible(false)}
                      >
                        取消
                      </Button>
                      <Button
                        type="primary"
                        onClick={() => this.handleSave('confirmTheMirrorRetraction')}
                      >
                        确定
                      </Button>
                    </>
                  ) : (suppFlag === 'G' ? ( // 集团确认发货
                    <>
                      <Button
                        style={{ marginRight: ' 12px' }}
                        onClick={() => this.modifyVisible(false)}
                      >
                        取消
                      </Button>
                      {curStatusCode === '52' ? ( // 52为供应商退回
                        <Popconfirm title="确定退回订单吗?" onConfirm={() => this.handleReturnOrder('10')}>
                          <Button
                            ghost
                            type="danger"
                            style={{ margin: '0 12px' }}
                          >
                            退回订单
                          </Button>
                        </Popconfirm>
                      ) : ''}
                      {curStatusCode === '04' ? (
                        <Button
                          type="primary"
                          onClick={() => this.modifyApplicationFormStatus('39')}
                        >
                          确认发货
                        </Button>
                      ) : ''}
                    </>
                  ) : (suppFlag === 'exchange' ? ( // 处方交换
                    <>
                      <Button
                        type="primary"
                        style={{ marginRight: ' 12px' }}
                        onClick={() => this.handleExchangeSave('01')}
                      >
                        保存
                      </Button>
                      {/* <Button
                        className="add-btn add-btn-nohover"
                        style={{ background: '#27b148', borderColor: '#27b148' }}
                        onClick={() => this.handleExchangeSave('02')}
                      >
                        发送
                      </Button> */}
                    </>
                  ) : ''))))))}
                </div>
              </Card>
            </div>
            <div className="common-card-right-split-line" style={{ width: 12, background: '#fff' }}></div>
          </Col>
          <Col span={8}>
            <Card
              size="small"
              className="md-card md-right-card"
              title={(
                <div className="card-title-left-icon">
                  <div></div>
                  订单生命周期
                </div>
              )}
            >
              <div id={interfaceFlag + 'md-steps'} className="md-steps scroll-bar-style">
                <Steps progressDot direction="vertical" current={currentStep}>
                  {stepsData && stepsData.map((item, index) => {
                    return (
                      <Step
                        key={index}
                        title={item.statusTitle}
                        className={(this.errorStatusCode.indexOf(item.statusCode) > -1) ? 'md-steps-item-error' : ''}
                        subTitle={(
                          ('deliverGoods' in item && item.deliverGoods && item.deliverGoods.length > 0) || item.floatDesc || item.remark ? (
                            <Tooltip
                              title={('deliverGoods' in item && item.deliverGoods && item.deliverGoods.length > 0) ? this.getDeliverGoods(item.deliverGoods) : (item.floatDesc ? this.getFloatDesc(item.floatDesc) : (item.remark ? this.getRemarkDesc(item.remark, item) : ''))}
                              trigger="click"
                              placement="rightTop"
                            >
                              <span className="span">详情</span>
                            </Tooltip>
                          ) : ''
                        )}
                        description={
                          <>
                            <div>
                              {item && item.statusDesc ? item.statusDesc : item.updateDateTime}
                            </div>
                            {item.updateUserDesc ? (
                              <div>
                                {item.updateUserDesc}
                              </div>
                            ) : ''}
                            {/* {item.remark ? <div style={{ color: 'red' }}>原因：{item.remark}</div> : ''} */}
                          </>
                        }
                      />
                    )
                  })}
                </Steps>
              </div>
            </Card>
          </Col>
        </Row>
      </Modal>
    )
  }
};

export default MatchingDetails;